<template>
	<view class="oredr">
		<!-- 顶部tab栏 -->
		<view class="tabBox" >
			<view :class="{red:index == current}" v-for="(item,index) in tablist" 
			:key="index" 
			@tap="tapEvents(index)">
			{{item.name}}</view>
		</view>
	
		<!-- 详情页 -->
		
		<!-- 订单数据 -->
		<view class="orderList"  v-if="current != 4 ">
			<view class="list" v-for="orderList in lists" :key="orderList.order.id" >
				<view class="top">
					<text>订单编号:{{orderList.order.orderSn}}  </text>
					<text>{{orderList.order.status  | statusText}}</text> 
				</view>
				<view class="center" v-for="item in orderList.items" :key="item.id">
					<image :src="item.productPic" mode=""></image>
					<view class="right">
						<view class="ritop">
							<text>{{item.productName}}</text>
							<text>￥{{item.productPrice}}</text>
						</view>
		
						<view class="ricenter">
							<text>编号 :  {{item.id}}</text>
							<text>x {{item.productQuantity}}</text>
						</view>
						<view class="riattr" v-for="attr in JSON.parse(item.productAttr) " >
							<text> {{attr.key}}: {{attr.value}}</text>
						</view>
						<view class="returnApply"  @tap="reApplay(item)"  v-if="current == 2 && item.isReturn != 1" >
							退货
						</view>
						<view class="returnApply" @tap="reApplay(item)"  style="color:red" v-if="current == 2 && item.isReturn == 1">
							退货中
						</view>
					</view>
					
				</view>
				<view class="bottom">
					<text>时间: {{orderList.order.modifyTime}}</text>
					<text>合计: {{orderList.order.totalAmount}}</text>
				</view>
				<view class="btnBox"  v-if="current == 0">
					<view class="btn" @tap="cancel(orderList.items[0].orderId)">
						取消订单
					</view>
					<view class="btn" @tap="payment(orderList)">
						付款
					</view>
				</view>
		
				<view class="btn2" v-if="current == 2"  @tap="receive(orderList.items[0].orderId)" >
					确认收货
				</view>
		
				<view class="btn2"  v-if='orderList.order.status == 4'>
					删除订单
				</view>
			</view>
		
		
		</view>
		
		
		<!-- 退单数据 -->
		<view class="orderList" v-else>
			 <view class="list" v-for="item in returnList" :key="item.id">
				<view class="top">
					<text>订单编号: {{item.orderSn}}</text>
					<text :class="returnList.status == 2 || 3 ? 'blue':''">{{item.status | orderProcessText}}</text>
				</view>
				<view class="center">
					<image :src="item.productPic" mode=""></image>
					<view class="right">
						<view class="ritop">
							<text>{{item.productName}}</text>
							<text>￥{{item.productPrice}}</text>
						</view>
				
						<view class="ricenter">
							<text>编号 : {{item.id}} </text>
							<text>x {{item.productCount}}</text>
						</view>
						<view class="riattr" v-for="attr in JSON.parse(item.productAttr)">
							<text>{{attr.key}} : {{attr.value}}</text>
						</view>
						<view class="returnApply" @tap="reApplay(item)"  v-if="current == 2">
							退货
						</view>
					</view>
					
				</view>
				<view class="bottom">
					<text>时间: {{item.createTime}}</text>
					<text>合计: {{item.returnAmount}}</text>
				</view>
			 </view>
		</view>
		
		<view class="d">
		
		</view>
		
	</view> 
</template>

<script>
	import {
		 findAllOrders,
		 receiveDone,
		orderReturnApplys	 
		 
	} from "../../../api/user/order/index.js"
	import {
		addPreOrder,
		cancelOrder
	} from "@/api/kind/info/index.js"
	
	import mix from"../../../mixins/index.js"
	export default {
		mixins:[mix], 
		data() {
			return {
				current:0,
				returnList:[],
				tablist:[
					{
						name:"代付款"
					},
					{
						name:"已付款"
					},
					{
						name:"已发货"
					},
					{
						name:"已收货"
					},
					{
						name:"售后"
					},
					
				],
				list:[], //订单数据
			};
		},
		onLoad(index) {
			console.log("上个界面传递过来的",index);
			this.current = index.type
			this.init()
			this.checkLogin()
			this.iniit()  //获取退单数据
			
			
		},
		
		// 过滤器
		filters:{
			statusText(val){
				if(val == 0){
					return "未付款"
				}else if(val == 1){
					return "确认付款,等待发货"
				}else if(val == 2){
					return "已发货"
				}else if(val == 3){
					return "已收货"
				}else if(val == 4){
					return "已完成"
				}else{
					return "无效订单"
				}
		
			},
			//已退款和已拒绝颜色需要展示成红色
			orderProcessText(process) {
				var text = '等待处理';
				switch (JSON.stringify(process)) {
					case '0':
						text = '等待处理';
						break;
					case '1':
						text = '确认退货,等待用户发货';
						break;
					case '2':
						text = '已退款';
						break;
					case '3':
						text = '已拒绝';
						break;
					case '9':
						text = '拒绝退货';
						break;

					default:
						break;
				}
				return text;
			}
		},
		computed:{
			// 遍历订单状态
			lists(){
				return this.list.filter(el =>{
					return el.order.status == this.current
				})
			},
			
			
			
		},
		methods:{
			tapEvents(all){
				this.current = all
			},
			// 获取订单列表
			init(){
				findAllOrders().then(res=>{
					console.log("订单列表",res);
					this.list = res.data.orderList
					console.log(this.list);
					
				})
			},
			// 获取退单数据
			iniit(){
				orderReturnApplys()
				.then( res=>{
					console.log("获取退单数据",res);
					this.returnList = res.data.items
				})
			},
			// 点击确认付款生成确认单 传入数据跳转到确认付款界面
			payment(val){
				var _this = this
				var obj1 ={
				"orderItemList": []
				}
				var arr =val.items
				arr.forEach(el =>{
					var obj = {
						"productId": el.procuctId,
						"productQuantity": el.productQuantity,
						"productSkuId": el.productSkuId
					} 
					obj1.orderItemList.push(obj)
				})
				addPreOrder(obj1).then(res =>{
					console.log("点击确认付款生成确认单",res);
						_this.id = res.data.orderId
						if(res.success){
							uni.showToast({
								title: "结算成功,1s后到订单页"
							})
							setTimeout(function() {
								uni.navigateTo({
									url:`../../selectAddress/selectAddress?id=${_this.id}`
								})
							},1000)
						} else{
							uni.showToast({
								title:res.message,
								icon:"none"
							})
						}
					
				})
			},
			
			//取消订单
			cancel(vall){
				var _this = this 
			// 传入取消订单的id
				cancelOrder(vall)
				.then(res =>{
					console.log("取消订单", res);
					uni.showToast({
						title:"取消订单",
						icon:"none"
					})
					setTimeout(function() {
						_this.init()
					}, 500)
				})
			},
			
			// 点击收货
			receive(id){
			var _this = this
				receiveDone({
					"orderId":id
				})
				.then(res =>{
					console.log(res);
					if(res.success){
						uni.showToast({
							title:res.message,
							icon:"none"
						})
						// 倒计时刷新页面
						setTimeout(function(){
							_this.init()
						},500)
					}
					
					
				})
			},
			
			// 点击退货跳转到退货界面  吧数据存到本地在另外的界面在从本地获取 有接口没有用
			reApplay(all){
				console.log("退货数据",all);
				uni.navigateTo({
					url:`./update/update?id=${all.orderId}&skuid=${all.id}`
				})
				
				// 保存本地方法不行
				// uni.setStorageSync("reList",all)
				// uni.navigateTo({
				// 	url:`./update/update?id=${sku.orderId}&skuid=${sku.id}`
				// })
			}
		},
		
	}
</script>

<style lang="scss" scoped>
	.oredr{
		
		.tabBox{
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding: 20rpx 0;
			background-color: #354E44;
			color: #FFFFFF;
			position: fixed;
			width: 100%;
			top: 90rpx;
		
		}
		.red{
			color: red;
		}
		
		
		// 订单详情
		.orderList {
			padding-top: 80rpx;
			margin-top: 20rpx;
		
			.list {
				width: 85%;
				padding: 30rpx;
				background-color: #fff;
				margin: 0 auto;
				margin-bottom: 40rpx;
				border-radius: 10rpx;
		
				.top {
					border-bottom: 1rpx solid #d3d3d3;
					font-size: 24rpx;
					display: flex;
					padding: 0rpx 0 20rpx 0;
					justify-content: space-between;
					color: #3e3e3e;
					
					.blue{
						color:#dd524d
					}
					
				}
		
				.center {
					display: flex;
					padding: 20rpx 0;
					border-bottom: 1rpx solid #d3d3d3;
		
					image {
						width: 160rpx;
						height: 160rpx;
					}
		
					.right {
						display: flex;
						flex-direction: column;
						margin-left: 25rpx;
						// padding: 0 10px ;
						width: 80%;
		
						.ritop {
							font-size: 26rpx;
							margin-bottom: 10rpx;
							display: flex;
							justify-content: space-between;
						}
		
						.ricenter {
							font-size: 24rpx;
							color: #8d8d8d;
							display: flex;
							justify-content: space-between;
						}
		
						.riattr {
							font-size: 24rpx;
							color: #8d8d8d;
						}
						.returnApply{
							text-align: right;
							font-size: 26rpx;
							color:#8d8d8d;
						}
					}
				}
		
				.bottom {
					font-size: 28rpx;
					display: flex;
					margin-top: 30rpx;
					justify-content: space-between;
				}
		
				.btnBox {
					display: flex;
					justify-content: flex-end;
		
					.btn {
						margin-top: 10rpx;
						border: 1px solid #034c46;
						width: 21%;
						padding: 10rpx;
						text-align: center;
						color: #034c46;
						border-radius: 10rpx;
						margin-left: 15rpx;
						font-size: 28rpx;
		
					}
				}
		
				.btn2 {
					margin-top: 10rpx;
					border: 1px solid #034c46;
					width: 21%;
					padding: 10rpx;
					text-align: center;
					color: #034c46;
					border-radius: 10rpx;
					margin-left: 480rpx;
					font-size: 28rpx;
					// margin-right: -180rpx;
		
				}
		
			}
		}
		
	}

</style>
